<template>
	<view>
		<swiperTabber :tabar="tabBars" :tabIndex="tabIndex" @tabtap="ontabtap" :tabbarItemStyle="{'width':'20%','text-align':'center'}"></swiperTabber>
		<swiper class="swiper-box" :style="{height:swiperHeight+'px'}" :current="tabIndex" @change="tabchange">
			<swiper-item class="swiper-item" v-for="(tab,index1) in newsList" :key="index1">
				<scroll-view class="scroll-v list" scroll-y @scrolltolower="loadMore(index1)">
					<template v-if="tab.list.length>0">
						<block v-for="(item,index) in tab.list" :key="index">
							<view class="rencent-list">
								<recentList :item="item"></recentList>
							</view>
							
						</block>
						<!-- 上拉加载 -->
						<loadMore :loadtext="tab.loadtext"></loadMore>
					</template>
					<template v-else>
						<!-- 默认无数据 -->
						<noThing></noThing>
					</template>

				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import swiperTabber from '@/components/index/swiper-tabbar.vue';
	import recentList from '@/components/news/recent-list.vue'
	import loadMore from '@/components/common/load-more.vue';
	import noThing from '@/components/common/no-thing.vue'
	export default {
		components: {
			swiperTabber,
			loadMore,
			noThing,
			recentList
		},
		data() {
			return {
				swiperHeight:500,
				tabIndex: 0,
				tabBars: [{
					name: '关注',
					id: 'guanzhu'
				}, {
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '体育',
					id: 'tiyu'
				}, {
					name: '热点',
					id: 'redian'
				}, {
					name: '财经',
					id: 'caijing'
				}, {
					name: '娱乐',
					id: 'yule'
				}, {
					name: '军事',
					id: 'junshi'
				}, {
					name: '历史',
					id: 'lishi'
				}, {
					name: '本地',
					id: 'bendi'
				}],
				newsList: [{
						loadtext: '上拉加载更多',
						list: [{
								titlePic: '../../static/img/topicpic/11.jpeg',
								title: '话题名称',
								desc: '话题描述',
								total: '220',
								nowtatal: '555'
							},
							{
								titlePic: '../../static/img/topicpic/1.jpeg',
								title: '伤感与生俱来',
								desc: '缘来缘去缘如水',
								total: '2899',
								nowtatal: '1'
							},
							{
								titlePic: '../../static/img/topicpic/2.jpeg',
								title: '天天打卡',
								desc: '天梯第一',
								total: '965456',
								nowtatal: '121'
							},
							{
								titlePic: '../../static/img/topicpic/8.jpeg',
								title: '咱们结婚吧',
								desc: '撒一把狗娘',
								total: '220',
								nowtatal: '555'
							},
							{
								titlePic: '../../static/img/topicpic/9.jpeg',
								title: '我的心情',
								desc: '每天攒一点努力和可爱，去换取一束光和更加美丽辽阔的未来',
								total: '144444',
								nowtatal: '4'
							},
							{
								titlePic: '../../static/img/topicpic/10.jpeg',
								title: '孤独是一种常态',
								desc: '我们每一个人都不喜欢孤独，因为总觉得孤独的人，会特别寂寞',
								total: '220',
								nowtatal: '555'
							},
							{
								titlePic: '../../static/img/topicpic/4.jpeg',
								title: '每人一句心里话',
								desc: '有什么心里话要对他说吗',
								total: '1423',
								nowtatal: '3'
							}
						]
					},
					{
						loadtext: '上拉加载更多',
						list: [{
								titlePic: '../../static/img/topicpic/11.jpeg',
								title: '话题名称',
								desc: '话题描述',
								total: '220',
								nowtatal: '555'
							},
							{
								titlePic: '../../static/img/topicpic/1.jpeg',
								title: '伤感与生俱来',
								desc: '缘来缘去缘如水',
								total: '2899',
								nowtatal: '1'
							},
							{
								titlePic: '../../static/img/topicpic/2.jpeg',
								title: '天天打卡',
								desc: '天梯第一',
								total: '965456',
								nowtatal: '121'
							},
							{
								titlePic: '../../static/img/topicpic/3.jpeg',
								title: '咱们结婚吧',
								desc: '撒一把狗娘',
								total: '220',
								nowtatal: '555'
							}
						]
					},
					{
						loadtext: '上拉加载更多',
						list: [{
								titlePic: '../../static/img/topicpic/11.jpeg',
								title: '话题名称',
								desc: '话题描述',
								total: '220',
								nowtatal: '555'
							},
							{
								titlePic: '../../static/img/topicpic/1.jpeg',
								title: '伤感与生俱来',
								desc: '缘来缘去缘如水',
								total: '2899',
								nowtatal: '1'
							},
							{
								titlePic: '../../static/img/topicpic/2.jpeg',
								title: '天天打卡',
								desc: '天梯第一',
								total: '965456',
								nowtatal: '121'
							},
							{
								titlePic: '../../static/img/topicpic/3.jpeg',
								title: '咱们结婚吧',
								desc: '撒一把狗娘',
								total: '220',
								nowtatal: '555'
							}
						]
					},
					{
						loadtext: '上拉加载更多',
						list: []
					},
					{
						loadtext: '上拉加载更多',
						list: []
					},
					{
						loadtext: '上拉加载更多',
						list: []
					},
				],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.windowHeight)
					console.log(res.screenHeight)
					let height = res.windowHeight - uni.upx2px(80)
					this.swiperHeight = height;
				}
			});
		},
		methods: {
			ontabtap(index) {
				this.tabIndex = index;
			},
			//滑动改变
			tabchange(e) {
				console.log(e)
				this.tabIndex = e.detail.current;
			},
			loadMore(index) {
				console.log(index)
				if (this.newsList[index].loadtext != "上拉加载更多") {
					return
				}
				//修改状态
				this.newsList[index].loadtext = "加载中...";
				setTimeout(() => {
					//获取完成
					let obj = {
								titlePic: '../../static/img/topicpic/3.jpeg',
								title: '长颈鹿的碎碎念',
								desc: '我是人间惆怅客，知君何事泪纵横',
								total: '124',
								nowtatal: '3'
							}
					this.newsList[index].list.push(obj);
					this.newsList[index].loadtext = "上拉加载更多"
				}, 1000)
				// this.newsList[index].loadtext="我也是有底线的"
			}
		}
	}
</script>

<style>
.scroll-v {
		height: 100%;
	}
	.rencent-list{
		padding: 0 20upx;
	}
</style>
